<template>
  <view class="card">
    <view class="card-h" v-if="title" :style="{ 'marginBottom': title ? '22rpx' : '0rpx' }">
      <view class="title">
        {{title}}
        <slot name='extend'></slot>
      </view>
      <view class="more" v-if="more" @click="toPages">
        {{more}}
        <text v-if="showRight" class="iconfont icon-more1"></text>
      </view>
    </view>
    <view class="card-b">
      <slot name="card-b"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "Card",
  props: {
    title: {
      type: String,
      default: ''
    },
    more: {
      type: String,
      default: ''
    },
    showRight: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    toPages () {
      this.$emit('topage')
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin: 20rpx 24rpx;
  padding: 24rpx;
  border-radius: 20rpx;
  background-color: #ffffff;
  &-h {
    display: flex;
    justify-content: space-between;
    .title {
      display: flex;
      color: #333333;
      font-size: 32rpx;
      font-weight: 600;
      align-items: center;
    }
    .more {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #999999;
    }
  }
}
</style>
